<html>
<head>
    <title>代码块高亮演示</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--cdnjs-->
    <!--<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/agate.min.css">-->
    <!--<script src="http:////cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>-->
    <!--jsdelivr-->
    <!--<link rel="stylesheet" href="http://cdn.jsdelivr.net/highlight.js/9.10.0/styles/agate.min.css">-->
    <!--<script src="http://cdn.jsdelivr.net/highlight.js/9.10.0/highlight.min.js"></script>-->
    <!--local-->
    <link rel="stylesheet" href="highlight/styles/agate.css">
    <script src="highlight/highlight.pack.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>

    <style>/*行号样式可以根据情境自己调整*/
    pre {
        position: relative;
        overflow: hidden;
    }

    code.has-numbering {
        margin-left: 21px;
    }

    .pre-numbering {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 7px 0;
        margin: 0;
        border-right: 1px solid #C3CCD0;
        border-radius: 3px 0 0 3px;
        text-align: center;
        color: #AAA;
    }
    </style>

</head>
<body>
<h3>切换样式:</h3>

<div id="changeStyleSelect"></div>

PHP
<hr>  
<pre><code class="php">
    class Test {
    private $name;
    private $age;
    public function __construct($array) {
    $this->name = $array['name'];
    $this->age = $array['age'];
    }

    public function getName() {
    return $this->name;
    }

    public function setName($name) {
    $this->name = $name;
    }

    public function getAge() {
    return $this->age;
    }

    public function show() {
    printf('my name is %s,age is %d',$this->name,$this->age);
    }

    }
</code></pre>


javascript
<hr>  
<pre><code class="javascript">
    var test = {
    name : function () {
    return 'hello';
    },
    age : function () {
    return 13;
    }
    };
    var name = "张三";
    function printStr(str){
    console.log(str);
    }
    printStr(name);
</code></pre>

python
<hr>  
<pre><code class="python">
    # 读取文件内容
    def fread(self):

    # 如果指针位置大于文件大小，说明是更换了文件
    self.filename = self.getLogPath()
    if not os.path.isfile(self.filename):
    while not self.checkfile() :
    time.sleep(5)
    self.filename = self.getLogPath()

    self.fclose()
    self.fopen()
    self.pos = 0


    self.hd.seek(self.pos,0)
    fline = self.hd.readline()
    self.pos = self.hd.tell()
    return fline.replace("\n","")


    # 将文件指针定位到文件尾部
    def feof(self):
    self.fopen()
    # 定位到文件末尾
    self.hd.seek(0,2)
    #设置指针位置
    self.pos = self.hd.tell()
</code></pre>

java
<hr>  
<pre><code class="java">
    package l2f.gameserver.model;

    import java.util.ArrayList;

    public abstract class L2Character extends L2Object {
    public static final Short ABNORMAL_EFFECT_BLEEDING = 0x0_0_0_1; // not sure

    public void moveTo(int x, int y, int z) {
    _ai = null;
    _log.warning("Should not be called");
    if (1 > 5) {
    return;
    }
    }

    /** Task of AI notification */
    @SuppressWarnings( { "nls", "unqualified-field-access", "boxing" })
    public class NotifyAITask implements Runnable {
    private final CtrlEvent _evt;

    List mList = new ArrayList()

    public void run() {
    try {
    getAI().notifyEvent(_evt, _evt.class, null);
    } catch (Throwable t) {
    t.printStackTrace();
    }
    }
    }
    }
</code></pre>
<script>
    styleArr = ["agate.css", "androidstudio.css", "arduino-light.css", "arta.css", "ascetic.css", "atelier-cave-dark.css", "atelier-cave-light.css", "atelier-dune-dark.css", "atelier-dune-light.css", "atelier-estuary-dark.css", "atelier-estuary-light.css", "atelier-forest-dark.css", "atelier-forest-light.css", "atelier-heath-dark.css", "atelier-heath-light.css", "atelier-lakeside-dark.css", "atelier-lakeside-light.css", "atelier-plateau-dark.css", "atelier-plateau-light.css", "atelier-savanna-dark.css", "atelier-savanna-light.css", "atelier-seaside-dark.css", "atelier-seaside-light.css", "atelier-sulphurpool-dark.css", "atelier-sulphurpool-light.css", "brown-paper.css", "codepen-embed.css", "color-brewer.css", "dark.css", "darkula.css", "default.css", "docco.css", "dracula.css", "far.css", "foundation.css", "github.css", "github-gist.css", "googlecode.css", "grayscale.css", "gruvbox-dark.css", "gruvbox-light.css", "hopscotch.css", "hybrid.css", "idea.css", "ir-black.css", "kimbie.dark.css", "kimbie.light.css", "magula.css", "mono-blue.css", "monokai.css", "monokai-sublime.css", "obsidian.css", "paraiso-dark.css", "paraiso-light.css", "pojoaque.css", "purebasic.css", "qtcreator_dark.css", "qtcreator_light.css", "railscasts.css", "rainbow.css", "school-book.css", "solarized-dark.css", "solarized-light.css", "sunburst.css", "tomorrow.css", "tomorrow-night.css", "tomorrow-night-blue.css", "tomorrow-night-bright.css", "tomorrow-night-eighties.css", "vs.css", "xcode.css", "xt256.css", "zenburn.css"];
    selectHtml = [];
    selectHtml.push('<select id="changeStyle">');
    for (var i in styleArr) {
        var OptionValue = styleArr[i];
        selectHtml.push('<option value="' + OptionValue + '" >' + OptionValue + '</option>');
    }
    selectHtml.push('</select>');
    var selectHtmlString = selectHtml.join("");
    document.getElementById('changeStyleSelect').innerHTML = selectHtmlString;

    var obj = document.getElementById('changeStyle');
    obj.addEventListener("change", function (event) {
        var value = this.options[this.options.selectedIndex].value;
        var l = document.createElement('link');
        l.setAttribute('href', 'highlight/styles/' + value);
        l.setAttribute('rel', 'stylesheet');
        document.head.appendChild(l);
    });

</script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>/*行号显示 依赖jquery*/
$(function () {
    $('pre code').each(function () {
        var lines = $(this).text().split('\n').length - 1;
        var $numbering = $('<ul/>').addClass('pre-numbering');
        $(this)
                .addClass('has-numbering')
                .parent()
                .append($numbering);
        for (i = 1; i <= lines; i++) {
            $numbering.append($('<li/>').text(i));
        }
    });
});
</script>
</body>
</html>  